<template>
  <div class="container">
    <!-- 顶部 -->
    <div class="container-nav">
      <div class="createtime">{{ this.articles.createTime }}</div>

      <!-- 下拉菜单 -->
      <el-dropdown>
        <span class="el-dropdown-link">
          <i class="el-icon-more"></i>
        </span>
        <el-dropdown-menu slot="dropdown" class="menu">
          <el-dropdown-item command="a" @click.native="deleteDoc">删除</el-dropdown-item>
          <!-- <el-dropdown-item command="b"  @click.native="$router.push('/inside/creation/publish?id=' + articles.articleId)">编辑</el-dropdown-item> -->
          <el-dropdown-item command="b"  @click.native="getList">编辑</el-dropdown-item>
          <!-- <div>{{articles}}</div> -->
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- 内容 -->
    <div class="container-article">
      <div class="article-title">{{this.articles.title}}</div>
      <div class="article-content">{{this.articles.summary}}</div>
      <div class="article-tag">
        <el-tag>生活</el-tag>
        <el-tag type="warning">心情</el-tag>
      </div>
      <img class="article-cover" :src="this.articles.articlePic">
    </div>
    <!-- 底部 -->
    <div class="container-bottom">
      <div class="user" v-if="userList">
        <!-- <el-avatar class="head-portrait" icon="el-icon-user-solid"></el-avatar> -->
        <img :src="this.userList.userPic" class="head-portrait" alt="">
        <span class="name">{{ this.articles.authorName }}</span>

      </div>
      <el-button type="primary" round @click="getContent">查看详情</el-button>
    </div>
  </div>
</template>

<script>
// import { log } from 'console'
// import Edit from "../../edit"
// import Details from "../../details"
import { getUserProfile } from '@/api/user.js'
export default {
  name: 'item',
  components: {
    // Edit
  },
  props: ['articles'],
  data () {
    return {
      // art: this.articles
      // article: this.articles,
      userList: ""
    }
  },
  created() {
    // this.getCreateTime()
    // console.log('打印如下')
    // console.log(this.art)
    this.loadUser()
  },
  mounted() {

  },
  methods: {
    // 编辑文章
    // editDoc () {
    //   const user = JSON.parse(window.sessionStorage.getItem('user'))
    //   if (user.username === this.itemlist.creator) {
    //     this.$router.push('/inside/creation/publish' + this.listId + '/' + this.groId)
    //   } else {
    //     this.$message('你不能编辑别人的文章')
    //   }
    // }
    // 获取当前文章信息，跳转编辑页面
    getList() {
      console.log(this.articles.articleId);
      // console.log(this)
      // this.$router.push('/inside/edit/'+this.articles.articleId)
      // this.$router.push(`/inside/edit/${this.articles.articleId}`)
      this.$router.push({name:'edit',params:{articleId:this.articles.articleId}});
    },
    //获取当前用户信息
    loadUser() {
      getUserProfile().then(res => {
          this.userList = res.data.data
          console.log(this.userList)
      });
    },
    // 获取当前文章详情,跳转到文章详情页面
    getContent() {
    // console.log(this.articles.articleId);
    // console.log(this)
    // this.$router.push('/inside/edit/'+this.articles.articleId)
    // this.$router.push(`/inside/edit/${this.articles.articleId}`)
    this.$router.push({name:'details',params:{articleId:this.articles.articleId}});
    },
  }
}
</script>


<style lang="less" scoped>
  .container {
    width: 36.5vw;
    height: 28.4vh;
    border-radius: 4px;
    background: rgba(244, 250, 232, 1);
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25);
  }
  .container .container-nav {
    height: 5.2vh;
    width: 36.5vw;
    color: rgba(119, 140, 162, 1);
    line-height: 5.2vh;
    box-sizing: border-box;
    position: relative;
    .createtime {
      font-size: 14px;
      position: absolute;
      left: 2vw;
    }
    ::v-deep .el-dropdown {
      color: rgba(183, 183, 183, 1);;
      float: right;
      margin-right: 0.8vw;
      transform: rotate(90deg);
    }
  }
  .container .container-article {
      height: 15.7vh;
      position: relative;
      .article-title {
        width: 20vw;
        height: 2.6vh;
        margin: 0 0 0 2vw;
        line-height: 2.6vh;
        color: rgba(13, 128, 120, 1);
        background-color: transparent;
      }
      .article-content {
        width: 20vw;
        height: 4.5vh;
        margin: 1vh 0 3vh 2vw;
        color: rgba(152, 169, 188, 1);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /*这里设置几行*/
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .article-tag {
        height: 5.2vh;
        margin: 0 2vw;
        background-color: transparent;
        width: 15vw;
        height: 5.2vh;
        margin: -2vh 0vw 0vh 2vw;
        .el-tag {
          height: 3.1vh;
          width: 4.2vw;
          text-align: center;
          font-size: 14px;
          display: inline-block;
          margin: 1vh 0.6vw 1vh 0;
        }
      }
      .article-cover {
        width: 12vw;
        height: 13.2vh;
        background-color: #fff;
        position: absolute;
        right: 1.2vw;
        top: 0.8vh;
      }
    }
  .container .container-bottom {
    height: 7.3vh;
    position: relative;
    border-top: 2px solid rgba(213, 237, 161, 1);
    .user {
      height: 3.3vh;
      width: 9.2vh;
      margin: 2vh 2vw;
      .head-portrait {
        display: inline-block;
        width: 2.1vw;
        height: 3.3vh;
        border-radius: 50%;
      }
      .name {
        font-size: 12px;
      }
    }
    .el-button {
      display: inline-block;
      position: absolute;
      right: 1.1vw;
      top: 1.5vh;
      background-color: rgba(13, 128, 120, 1);
    }
  }

</style>
